<template>
  <div class="content">
      <div>
          <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
              <template #title>
                  <div class="nav-bar-title-style">盘库物料</div>
              </template>
              <template #left>
                  <van-icon size="30" name="arrow-left" color="#FFF" />
              </template>
          </van-nav-bar>
      </div>

      <!-- 下拉 -->
      <div class="selectCont">
          <div class="comdix"  @click="showPickerFun">
              <div style="width: 5px;height: 22px;"><img src="@/assets/ic_left_blue_signal.png"  /></div>
              <div class="pickname">{{pickName}}</div>
          </div>
          <div class='pickRight' @click="showPickerFun">
              <span style="margin-right: 10px;color: #999999;">切换</span>
              <van-icon name="arrow" />
          </div>
      </div>
      <van-popup v-model="showPicker" round position="top">
          <van-picker
            title="请选择"
            show-toolbar
            value-key="storageMappingName"
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
          />
      </van-popup>

      <div style="height: 10px;background-color: #f2f2f2;"></div>
      <!-- 列表 -->
      <van-pull-refresh class="pull-refresh-style" v-model="refreshing" @refresh="onRefresh">
          <van-list
            :offset="offset"
            :finished="finished"
            finished-text="没有更多了"
            @load="getInStorageList"
          >
              <van-cell>
                  <div class="list" v-for="(item,index) in list" :key="index">
                      <li class="totoalItemStyle">
                          <div class="title">{{item.materialName}}</div>
                          <div class="desc">
                              <van-icon name="warning-o" class="warnCol" v-if="item.flag === 2"/>
                              <span style="margin-left: 5px;" v-if="item.flag === 0">{{item.haveChecked}}/{{item.stockNum}}</span>
                              <span style="margin-left: 5px;color: green;" v-if="item.flag === 1">{{item.haveChecked}}/{{item.stockNum}}</span>
                              <span style="margin-left: 5px;color: red;" v-if="item.flag === 2">{{item.haveChecked}}/{{item.stockNum}}</span>
                          </div>
                      </li>
                  </div>
                  <!-- <div @click="scanSeeStore">测试扫码盘库</div> -->
              </van-cell>
          </van-list>
      </van-pull-refresh>
  </div>
</template>

<script>
  import router from "@/router";
  import { Toast } from 'vant';
  import http from '@/utils/request.js';
  import api from '@/utils/api.js';
  import { Dialog } from "vant";
  export default{
    data(){
      return{
        pickName:'切换',
        stroageId:'',
        columns: [],
        list:[],
        showPicker: false,
        offset: 0,
        finished: true,
        refreshing: false,
      }
    },
    created() {
      window.scanSeeStore = this.scanSeeStore;
      this.getInStorageList();
    },
    methods:{
      // 返回
      onClickLeft() {
        router.push({ path: "/SeeStorageIndex" });
      },
      // 初始化
      getInStorageList(){
          this.storeList()
      },
      //仓库列表
      storeList(){
          this.loading = true;
          var params = {
            id:this.$route.query.id
          }
          http.fetchGet(api.getCheckStroagesList, params,'加载中...').then(res => {
              if(res.code === 1){
                this.columns = res.data;
                this.pickName = res.data[0].storageMappingName;
                this.stroageId = res.data[0].storageMappingId;
                this.finished = true; //是否已加载完成，加载完成后不再触发load事件
                this.refreshing = false; //下拉刷新时，顶部是否处于加载中状态
                this.wulList()
              }
          }).catch(err => {
              console.log(err)
          });
      },
      //物料列表
      wulList(materialId,clos){
          this.loading = true;
          var params = {
            planId:this.$route.query.id,
            stroageId:this.stroageId
          }
          http.fetchGet(api.getCheckMaterial, params,'加载中...').then(res => {
              if(res.code === 1){
                this.list = res.data.map(item =>{
                    item.flag = 0;
                    return item
                });
                if(materialId && clos===1){
                    this.list.map(item =>{
                        if(item.materialId === materialId){
                            item.flag = 1;
                        }
                    })
                }
                if(materialId && clos===2){
                    this.list.map(item =>{
                        if(item.materialId === materialId){
                            item.flag = 2;
                        }
                    })
                }
                this.finished = true; //是否已加载完成，加载完成后不再触发load事件
                this.refreshing = false; //下拉刷新时，顶部是否处于加载中状态
              }
          }).catch(err => {
              console.log(err)
          });
      },
      // 扫码盘库
      scanSeeStore(scanedBarCode) {
          var param={
            QrCode: scanedBarCode,
            // QrCode: '3816176656544956421',
            planId:this.$route.query.id,
            storageMappingId:this.stroageId
          };
          http.fetchPost(api.ScanedQrCode, param, "正在扫码,请稍后...").then(res => {
              if(res.data.code === 1){
                  var cols = 1;
                  this.wulList(res.data.materialId,cols)
              }else if(res.data.code === 2){
                  var cols = 2;
                  this.list.map(item =>{
                      if(item.materialId === res.data.materialId){
                          item.flag = 2;
                      }
                  })
                  this.wulList(res.data.materialId,cols)
                  Dialog.alert({
                    title: "友情提示",
                    message: res.data.message,
                  })
              }else if(res.data.code === 3){
                  Dialog.alert({
                    title: "友情提示",
                    message: res.data.message,
                  })
              }
          }).catch(err => {
              Toast(err)
          });
      },
      onRefresh(){
        this.wulList()
      },
      showPickerFun(){
        if(this.showPicker){
          this.showPicker = false;
        }else{
          this.showPicker = true;
        }
      },
      // 下拉确定
      onConfirm(obj, index) {
        this.pickName = obj.storageMappingName;
        this.stroageId = obj.storageMappingId;
        this.showPicker = false;
        this.wulList()
      },
      // 下拉取消
      onCancel() {
        this.showPicker = false;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .comdix{
    display: flex;
    align-items: center;
    width: 78%;
  }
  .pickname{
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .nav-bar-style {
    background: #2E71FF;
    color: #fff;
  }
  .nav-bar-title-style {
    font-size: 22px;
    text-align: center;
    font-family: PingFangSC-Regular;
    color: #fff;
    margin-right: 62px;
  }

  // 下拉
  .selectCont{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    font-size: 20px;
    height: 40px;
    z-index: 9999;
    position: relative;
  }
  .pickRight{
    display: flex;
    align-items: center;
  }
  .van-popup--top.van-popup--round{
    margin-top: 124px;
  }
  .nav-bar-style{
    z-index: 9999;
  }

  .titleSignalStyle {
    background-color: #F6F6F6;
    padding: 15px;
    box-sizing: border-box;
    font-weight: 800;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .titleSignalTextValue {
    font-size: 20px;
    margin-left: 10px;
    width: auto;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333333;
  }
  .totoalItemStyle {
    border-bottom: 1px solid #DDDDDD;
    display: flex;
    padding: 18px 0px;
    flex-shrink: 1;
    font-size: 20px;
    align-items: flex-start;
    background-color: #fff;
    flex-grow: 1;
    width: 100%;
    justify-content: space-between;
    flex-flow: row nowrap;
    align-items: center;
  }
  .itemDescript {
    display: flex;
    justify-content: space-between;
    width: auto;
    width: 100%;
    font-size: 20px;
  }
  .title {
    display: flex;
    min-width: 27%;
    flex-wrap: nowrap;
    font-size: 20px;
    color: #999999;
    align-self: flex-start;
    align-items: flex-start;
    text-align: left;
  }
  .desc {
    font-size: 20px;
    color: #333333;
    display: flex;
    align-items: center;
    text-align: left;
  }
  .btn {
    height: 36px;
    line-height: 36px;
    min-width: 100px;
    border-radius: 50px;
  }
  .itemRightButtonStyle {
    text-align: flex-end;
    width: auto;
    align-items: flex-end;
    margin-right: 25px;
    width: 20%;
  }
  .btnStyle {
    width: 95px;
    height: 36px;
    color: #2E71FF;
    border-color: #2E71FF;
  }

  .endPK{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
  }
  .endBtn{
    width: 100%;
    height: 100%;
  }
  .warnCol{
    color: red;
  }
  .van-cell{
    padding: 0 16px;
  }
  .greens{
    color: green;
  }
  .reds{
    color: red;
  }
</style>
